<template>
<div>x:{{x}}y:{{y}}  </div>
<vDateList @gatewayData="getmsg" :msg="msg" />
</template>
<script  setup>
import { ref } from "vue";
import userMousePosition from "../hooks/userMousePosition";
import vDateList from "../components/DateList.vue";

const {x,y} = userMousePosition();

let msg = ref("");
const getmsg = (e) => {
 console.log("父组件",e);
};

//第一种：原型链继承
  function Parent1() {
    this.name = 'parent1';
    this.play = [1, 2, 3]
    this.msg={
    age:18,
    name:"张三"
    }
  }
  function Child1() {
    this.type = 'child2';
  }
  Child1.prototype = new Parent1();
  let child1 = new Parent1();
  let sun1 = new Child1();
  let sun2 = new Child1();
  sun1.play.push(4);
  sun1.msg.age = 20;
  console.log(new Child1());
  console.log('sun1',sun1.msg, sun1.play)//sun1.play[1, 2, 3, 4]
  console.log('sun2',sun2.msg,  sun2.play)//sun2.play[1, 2, 3,4]
//缺点 修改sun1的时候sun2的示例对象也会改变.注:只有引用值会改变,原始值不会改变


// 第二种：构造函数继承（借助 call）
  function Parent2(){
    this.name = 'parent2';
    this.getangry = () => {
      console.log('parent2111')
    }
  }

  Parent2.prototype.getName = function () {
    return this.name;
  }

  function Child2(){
    Parent2.call(this);
    this.type = 'child2'
  }

  let child2 = new Child2// 没问题ld2();
  child2.getangry()
  console.log('child2',child2);  // 没问题
  // console.log(child2.getName());  // 会报错
// 缺点：构造函数继承，只能继承父类的实例属性和方法，不能继承原型属性或者方法。

// 第三种：组合继承（前两种组合）
  function Parent3 () {
    this.name = 'parent3';
    this.play = [1, 2, 3];
  }

  Parent3.prototype.getName = function () {
    return this.name;
  }
  function Child3() {
    // 第二次调用 Parent3()
    Parent3.call(this);
    this.type = 'child3';
  }

  // 第一次调用 Parent3()
  Child3.prototype = new Parent3();
  // 手动挂上构造器，指向自己的构造函数
  Child3.prototype.constructor = Child3;
  var s3 = new Child3();
  var s4 = new Child3();
  s3.play.push(4);
  console.log(s3.play, s4.play);  // 不互相影响
  console.log(s3.getName()); // 正常输出'parent3'
  console.log(s4.getName()); // 正常输出'parent3'



for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i++);
    }, 1000);

}
 console.log(i);
</script>
<style scoped>

</style>
